<template>
  <div class="modal-wrapper">
    <!-- Element Plus 前台弹窗 -->
    <template v-if="!isAdmin">
      <el-dialog
        v-model="visible"
        :title="title"
        :width="width"
        :top="top"
        :modal="modal"
        :append-to-body="true"
        :close-on-click-modal="closeOnClickModal"
        :close-on-press-escape="closeOnPressEscape"
        :show-close="showClose"
        :destroy-on-close="destroyOnClose"
        :class="[
          'modern-dialog',
          size,
          { 'with-image': withImage, 'is-fullscreen': isFullscreen },
        ]"
        @close="handleClose"
      >
        <!-- 自定义头部 -->
        <template #header>
          <div class="dialog-header" :class="{ 'with-subtitle': subtitle }">
            <div class="header-content">
              <slot name="header">
                <h3 class="dialog-title">{{ title }}</h3>
                <p v-if="subtitle" class="dialog-subtitle">{{ subtitle }}</p>
              </slot>
            </div>
            <div class="header-actions" v-if="showHeaderActions">
              <slot name="header-actions">
                <el-button
                  v-if="allowFullscreen"
                  class="fullscreen-btn"
                  :icon="isFullscreen ? 'FullscreenExit' : 'FullScreen'"
                  @click="toggleFullscreen"
                />
                <el-button
                  v-if="showClose"
                  class="close-btn"
                  icon="Close"
                  @click="handleClose"
                />
              </slot>
            </div>
          </div>
        </template>

        <!-- 图片展示区 -->
        <template v-if="withImage" #prepend>
          <div class="dialog-image">
            <slot name="image">
              <el-image
                :src="imageSrc"
                fit="cover"
                :preview-src-list="imagePreviewList"
              />
            </slot>
          </div>
        </template>

        <!-- 内容区域 -->
        <div
          class="dialog-body"
          :class="{
            'with-image': withImage,
            'with-tabs': withTabs,
            scrollable: scrollable,
          }"
        >
          <!-- 选项卡 -->
          <el-tabs
            v-if="withTabs"
            v-model="activeTab"
            class="dialog-tabs"
            :type="tabType"
          >
            <el-tab-pane
              v-for="tab in tabs"
              :key="tab.name"
              :label="tab.label"
              :name="tab.name"
            >
              <slot :name="'tab-' + tab.name">
                {{ tab.content }}
              </slot>
            </el-tab-pane>
          </el-tabs>

          <!-- 主要内容 -->
          <div class="dialog-content" :class="contentClass">
            <slot></slot>
          </div>
        </div>

        <!-- 底部按钮 -->
        <template #footer>
          <div
            v-if="showFooter"
            class="dialog-footer"
            :class="{ 'with-divider': footerDivider }"
          >
            <div class="footer-left">
              <slot name="footer-left"></slot>
            </div>
            <div class="footer-right">
              <slot name="footer">
                <el-button
                  v-if="showCancel"
                  :class="cancelButtonClass"
                  @click="handleCancel"
                >
                  {{ cancelText }}
                </el-button>
                <el-button
                  v-if="showConfirm"
                  :type="confirmButtonType"
                  :class="confirmButtonClass"
                  :loading="loading"
                  @click="handleConfirm"
                >
                  {{ confirmText }}
                </el-button>
              </slot>
            </div>
          </div>
        </template>
      </el-dialog>
    </template>

    <!-- Arco Design 后台弹窗 -->
    <template v-else>
      <a-modal
        v-model:visible="visible"
        :title="title"
        :width="width"
        :top="top"
        :mask="modal"
        :mask-closable="closeOnClickModal"
        :closable="showClose"
        :unmount-on-close="destroyOnClose"
        :class="['modern-modal', size]"
        @cancel="handleClose"
      >
        <!-- 自定义头部 -->
        <template #title>
          <div class="modal-header" :class="{ 'with-subtitle': subtitle }">
            <slot name="header">
              <h3 class="modal-title">{{ title }}</h3>
              <p v-if="subtitle" class="modal-subtitle">{{ subtitle }}</p>
            </slot>
          </div>
        </template>

        <!-- 内容区域 -->
        <div class="modal-body" :class="contentClass">
          <slot></slot>
        </div>

        <!-- 底部按钮 -->
        <template #footer>
          <div
            v-if="showFooter"
            class="modal-footer"
            :class="{ 'with-divider': footerDivider }"
          >
            <div class="footer-left">
              <slot name="footer-left"></slot>
            </div>
            <div class="footer-right">
              <slot name="footer">
                <a-button
                  v-if="showCancel"
                  :class="cancelButtonClass"
                  @click="handleCancel"
                >
                  {{ cancelText }}
                </a-button>
                <a-button
                  v-if="showConfirm"
                  :type="confirmButtonType"
                  :class="confirmButtonClass"
                  :loading="loading"
                  @click="handleConfirm"
                >
                  {{ confirmText }}
                </a-button>
              </slot>
            </div>
          </div>
        </template>
      </a-modal>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { FullScreen, FullscreenExit, Close } from "@element-plus/icons-vue";

const props = defineProps({
  isAdmin: {
    type: Boolean,
    default: false,
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  subtitle: {
    type: String,
    default: "",
  },
  width: {
    type: [String, Number],
    default: "50%",
  },
  top: {
    type: String,
    default: "15vh",
  },
  modal: {
    type: Boolean,
    default: true,
  },
  closeOnClickModal: {
    type: Boolean,
    default: true,
  },
  closeOnPressEscape: {
    type: Boolean,
    default: true,
  },
  showClose: {
    type: Boolean,
    default: true,
  },
  destroyOnClose: {
    type: Boolean,
    default: false,
  },
  showFooter: {
    type: Boolean,
    default: true,
  },
  footerDivider: {
    type: Boolean,
    default: true,
  },
  showCancel: {
    type: Boolean,
    default: true,
  },
  showConfirm: {
    type: Boolean,
    default: true,
  },
  confirmText: {
    type: String,
    default: "确定",
  },
  cancelText: {
    type: String,
    default: "取消",
  },
  confirmButtonType: {
    type: String,
    default: "primary",
  },
  size: {
    type: String,
    default: "default",
    validator: (value) => ["small", "default", "large", "full"].includes(value),
  },
  loading: {
    type: Boolean,
    default: false,
  },
  scrollable: {
    type: Boolean,
    default: true,
  },
  withImage: {
    type: Boolean,
    default: false,
  },
  imageSrc: {
    type: String,
    default: "",
  },
  imagePreviewList: {
    type: Array,
    default: () => [],
  },
  withTabs: {
    type: Boolean,
    default: false,
  },
  tabs: {
    type: Array,
    default: () => [],
  },
  tabType: {
    type: String,
    default: "border-card",
  },
  allowFullscreen: {
    type: Boolean,
    default: false,
  },
  showHeaderActions: {
    type: Boolean,
    default: true,
  },
  contentClass: {
    type: [String, Array, Object],
    default: "",
  },
  confirmButtonClass: {
    type: [String, Array, Object],
    default: "",
  },
  cancelButtonClass: {
    type: [String, Array, Object],
    default: "",
  },
});

const emit = defineEmits([
  "update:modelValue",
  "confirm",
  "cancel",
  "close",
  "tab-change",
]);

const visible = ref(props.modelValue);
const isFullscreen = ref(false);
const activeTab = ref(props.tabs[0]?.name);

// 监听数据变化
watch(
  () => props.modelValue,
  (val) => {
    visible.value = val;
  },
);

watch(
  () => visible.value,
  (val) => {
    emit("update:modelValue", val);
  },
);

watch(
  () => activeTab.value,
  (val, oldVal) => {
    emit("tab-change", { newTab: val, oldTab: oldVal });
  },
);

// 处理确认
const handleConfirm = () => {
  emit("confirm");
  visible.value = false;
};

// 处理取消
const handleCancel = () => {
  emit("cancel");
  visible.value = false;
};

// 处理关闭
const handleClose = () => {
  emit("close");
  visible.value = false;
};

// 切换全屏
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value;
};

// 对外暴露方法
defineExpose({
  open: () => (visible.value = true),
  close: () => (visible.value = false),
  toggleFullscreen,
});
</script>

<style lang="scss" scoped>
.modal-wrapper {
  :deep(.modern-dialog),
  :deep(.modern-modal) {
    @apply rounded-xl shadow-2xl backdrop-blur-sm;

    &.small {
      @apply max-w-md;
    }
    &.large {
      @apply max-w-4xl;
    }
    &.full {
      @apply w-[95vw] max-w-[95vw];
    }

    &.is-fullscreen {
      @apply fixed inset-0 w-screen h-screen max-w-none rounded-none;

      .dialog-body {
        @apply h-[calc(100vh-120px)];
      }
    }

    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    .dark & {
      @apply bg-gray-900/95 border-gray-800/20;
    }
  }

  .dialog-header,
  .modal-header {
    @apply flex items-start justify-between p-6;

    &.with-subtitle {
      @apply pb-4;
    }

    .header-content {
      @apply flex-1;
    }

    .dialog-title,
    .modal-title {
      @apply text-xl font-semibold text-gray-900 dark:text-gray-100 m-0;
    }

    .dialog-subtitle,
    .modal-subtitle {
      @apply mt-2 text-sm text-gray-500 dark:text-gray-400;
    }

    .header-actions {
      @apply flex items-center space-x-2 ml-4;
    }
  }

  .dialog-image {
    @apply relative w-full h-64 overflow-hidden;

    img {
      @apply w-full h-full object-cover;
    }
  }

  .dialog-body,
  .modal-body {
    @apply p-6;

    &.scrollable {
      @apply overflow-y-auto;
    }

    &.with-image {
      @apply pt-4;
    }

    &.with-tabs {
      @apply p-0;

      .dialog-tabs {
        @apply mb-0;
      }

      .dialog-content {
        @apply p-6;
      }
    }
  }

  .dialog-tabs {
    :deep(.el-tabs__header) {
      @apply m-0;
    }

    :deep(.el-tabs__nav-wrap) {
      @apply p-0;
    }
  }

  .dialog-footer,
  .modal-footer {
    @apply flex items-center justify-between px-6 py-4;

    &.with-divider {
      @apply border-t border-gray-100 dark:border-gray-800;
    }

    .footer-left {
      @apply flex items-center space-x-4;
    }

    .footer-right {
      @apply flex items-center space-x-3;
    }
  }

  :deep(.el-button) {
    @apply rounded-lg text-sm font-medium min-w-[88px];
  }

  :deep(.el-button--primary) {
    @apply bg-primary-600 hover:bg-primary-700 active:bg-primary-800;
  }

  :deep(.el-loading-mask) {
    @apply backdrop-blur-sm bg-white/50 dark:bg-black/50;
  }
}
</style>
